<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>箭头函数带来的this变化</title>
</head>
<body>
    <button>Jimmy</button>
    <button>xuexue</button>
</body>
<script>
    /*
        前面我们学习了函数和方法的this的指向是不同的  函数的this指向的是windos对象  方法的this指向的是拥有这个方法的对象
            这里关于函数说的是不准确  函数的this也会因为是普通函数和箭头函数发生区别
                普通函数的this指向的是wwindow对象  箭头函数的this指向的是其父元素的this
    */

    /*
        那么现在问题来了，两种函数的this指向是不一样的  那在开发中到底应该使用哪种函数呢？
            在我的眼中  我们应该能用箭头函数的时候就使用箭头函数  配合参数e我们可以做到绝大多数的情况
                当然 在需要使用普通函数的时候还是应该使用普通函数
    */

    let obj = {
        name:'jimmy',
        lessones:['ysh','zx','zh','try'],
        getname(){
            console.log(this.name)
        },
        each(){
            this.lessones.map(item=>{
                console.log(this.name) //jimmy
                /*
                    分析：上一段代码的this.name为什么能够访问的到jimmy?
                        这里是箭头函数  所以this指向的是父元素的this  父元素是each方法
                            方法的this指向的是拥有这个方法的对象  
                                所以最终这里的this指向的也是obj对象
                */
            })
        },
        grow(){
            let btns = document.querySelectorAll('button')
            btns.forEach(function(item){
                /*
                    下面两端代码添加点击事件  最后的效果其实是一样的
                */
                item.addEventListener('click',function(){
                    console.log(this)  //<button>jimmy</button>   <button>xuexue</button>
                })
                item.onclick = function(){
                    // 这里的function相当于是item的onclick属性的方法  所以这里方法的this指向的就是item
                }
            }) 
            btns.forEach(item=>{
                item.addEventListener('click',(e)=>{
                    /*
                        这里都是使用的箭头函数 所以他的this就会一层一层的往上找  最后找到grows的this  
                            grow的this指向的是obj这个对象  所以在这里this.name是能够访问的到jimmy的
                    */
                    console.log(this.name)  // jimmy
                    /*
                        当我们使用箭头函数的时候，也想要获取当前的点击的元素  可以使用事件的参数e
                            e.target就是表示当前点击的元素
                    */
                    console.log(e.target)  // 点击的元素  相当于是在这里使用普通function里面的this
                })
            })
        }
    }
    obj.each()
    obj.grow()
</script>
</html>e